<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <div><span v-text="msg"></span></div>
      <!-- 等同于 -->
      <div><span>{{msg}}</span></div>

      <!-- 绑定 attribute -->
      <div><img v-bind:src="imageSrc" /></div>

      <!-- 动态 attribute 名 -->
      <div><button v-bind:[key]="value">按钮1</button></div>

      <!-- 缩写 -->
      <div><img :src="imageSrc" /></div>

      <!-- 缩写形式的动态 attribute 名 -->
      <div><button :[key]="value">按钮2</button></div>

      <!-- 内联字符串拼接 -->
      <div><img :src="'/path/to/images/' + fileName" alt="暂无图片" /></div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
      const { createApp, ref } = Vue;

      /*
      模板语法可以分为两种：
      1. 插值语法
      2. 指令语法

      本小节主要学习指令语法
      */
      const app = createApp({
        setup() {
          const msg = ref("hello");
          const imageSrc = ref(
            "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
          );
          const key = ref("value");
          const value = ref("btn");
          const fileName = "xxxx.jpg";
          return {
            msg,
            imageSrc,
            key,
            value,
            fileName,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
